<template>
  <div class="my-4">
    <SectionTitle title="表头属性" />
  </div>
  <BasicForm @register="registerForm" />
</template>

<script lang="ts">
  import { defineComponent, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import SectionTitle from '../SectionTitle.vue';

  export default defineComponent({
    components: {
      BasicForm,
      SectionTitle,
    },
    props: {
      list: {
        type: Array as unknown as any[],
        default: () => [],
      },
    },
    setup(props) {
      const [registerForm, { setProps, validate, setFieldsValue }] = useForm({
        labelWidth: 120,
        baseColProps: { span: 8 },
        showActionButtonGroup: false,
      });

      watch(
        () => props.list,
        (val) => {
          console.log('propval', val);
          setProps({
            schemas: props.list,
          });
        },
      );

      return {
        registerForm,
        validate,
        setFieldsValue,
      };
    },
  });
</script>
<style lang="less" scoped></style>
